<template>
    <div>
<div class="box">
    <horder class="horder">
        <van-icon name="wap-nav" style="float: left;" size="20px"/>
        <van-icon name="share-o"  style="float: right;" size="20px"/>
    </horder>
    <main class="main">
        <p style="text-align: center;"><img src="@/assets/images/图片5_03.gif" alt=""  ></p>
        <p style="text-align: center;">第二梦</p>
        <p style="text-align: center;">成为黑卡会员</p>
        <p style="text-align: center; color: #ccc;">14关注  1385粉丝  1.3万获赞与收藏 </p>
        <p style="text-align: center;margin: 20px 0 0 0;border: 1px solid black;">编辑个人资料</p>
        <p style="border-bottom: 1px solid #000;margin-top: 20px;text-align: center;">完善您的位置信息  社区等级：升级规则></p>
        <p style="margin-top: 20px;">添加个人信息让更多人喜欢你</p>
        
        <ul style="column-count: 2;">
                            <li v-for="item in list" :key="item.id" style="break-inside: avoid;" @click="$router.push('/detail/'+item.id)" keep-alive>
                                <img :src="item.image" alt="" style="width: 100%;">
                                <p>{{ item.title }}</p>
                                <p>{{ item.price }}</p>
                            </li>
                        </ul>
    </main>
  </div>
    </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()

import api from '@/api/api'
import { onMounted, ref } from 'vue'
const list = ref([])
onMounted(() => {
    api.get('/list', {
        params: { pagination: 1, pageNum: 30 }
    }).then(res => {
        if (res.data.code == 200) {
            list.value = res.data.data
        }
    })
})
</script>

<style lang="scss" scoped>

</style>